@import "../base/_vars";
@import "../base/_mixins";

.clearfix {
	&:after, &:before {
		display: block;
		content: "";
	}
	&:after {
		clear: both;
	}
}
.M-tabs {
	ul {
		text-align: center;
		@include box();
	}
	li {
		font-size: 36px / $ppr;
		@include box-flex(1);
		a {
			display: block;
			line-height: 80px / $ppr;
			color: #fff;
		}
		i {
			font-size: 32px / $ppr;
		}
	}
	.pri {
		background-color: #43b5c6;
	}
	.yel {
		margin: 0 10px / $ppr;
		background-color: #f5a043;
	}
	.hot {
		background-color: #fc4c44;
	}
}
.weui_tabbar ~ .M-pic {
	padding-bottom: 110px / $ppr;
}
.M-pic {
	padding-top: 15px / $ppr;
	padding-left: 15px / $ppr;
	padding-right: 5px / $ppr;
	& > li {
		padding-right: 10px / $ppr;
		padding-bottom: 10px / $ppr;
		float: left;
		width: 50%;
	}
	.pic-cell {
		position: relative;
		@include border();
	}
	.pic-inner {
		padding: 5px / $ppr;
	}
	.pic-tt {
		position: relative;
		padding-top: 100%;
		width: 100%;
		img {
			position: absolute;
			left: 0;
			top: 0;
			display: block;
			width: 100%;
			height: 100%;
		}
	}
	h3, .pic-btns, p {
		padding: (5px / $ppr) (10px / $ppr);
	}
	p {
		@include box();
		& > span {
			@include box-flex(1);
			display: block;
		}
	}
	.pic-btns {
		a {
			border-radius: 10px;
			line-height: 60px / $ppr;
		}
	}
}
.M-box {
	position: relative;
	margin: 40px / $ppr 0 0;
	padding-top: 80px / $ppr;
	border: 5px solid #ef4f4f;
	border-radius: 8px / $ppr;
	background-color: #fbf9fe;
	.box-tit {
		position: absolute;
		z-index: 10;
		left: 50%;
		top: 0;
		padding: 0 20px / $ppr;
		line-height: 80px / $ppr;
		border-radius: 8px / $ppr;
		background-color: #ef4f4f;
		color: #fff;
		font-weight: 600;
		font-size: 30px / $ppr;
		@include translate(-50%, -40px / $ppr);
		@include box();
		& > span {
			@include box-flex(1);
			padding: 0 10px / $ppr;
			width: 50%;
		}
	}
}
.M-btns {
	padding: 10px / $ppr;
	& > a {
	}
}
$mask-size: 60px / $ppr;
.M-to {
	position: fixed;
	right: 40px / $ppr;
	bottom: 20px / $ppr;
	width: $mask-size;
	height: $mask-size;
	line-height: $mask-size;
	text-align: center;
	color: #fff;
	.to-mask {
		position: absolute;
		left: 0;
		top: 0;
		width: $mask-size;
		height: $mask-size;
		border-radius: 50%;
		background-color: $color-primary;
	}
	& > i {
		position: absolute;
		z-index: 10;
		left: 50%;
		top: 50%;
		font-size: 32px / $ppr;
		@include translate(-50%, -50%);
	}
}

.banner-img {
	display: block;
	width: 100%;
	height: auto;
}


$search-color: #8ac0af;

.search {
	padding: 30px / $ppr 0;
	form {
		@include box();
	}
	@at-root #{&}_input {
		margin-right: 20px / $ppr;
		padding: 5px / $ppr 20px / $ppr;
		height: 60px / $ppr;
		border: 4px solid $search-color;
		border-radius: 8px;
		@include box-flex(8);
		display: block;
	}
	@at-root #{&}_submit {
		padding: 0 30px / $ppr;
		border: none;
		height: 60px / $ppr;
		background-color: $search-color;
		@include box-flex(2);
		color: #fff;
		border-radius: 8px;
	}
}